<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="author" content="ChongMing" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <title>充值</title>
</head>
<link rel="stylesheet" href="../css/framework7.ios.min.css">
<link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="../css/my-app.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/swiper-3.3.1.min.css">
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="../js/swiper-3.3.1.jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script src="js/ap.js"></script>
<script src="js/pingpp.js"></script>
<script>
    $(function(){
        //    点击促销会员卡
        var con_h = $('.gradecard .payment-layer .con').height();
        $('.gradecard .payment-layer').hide();
        $('.gradecard .payment-layer .con').css('bottom',-con_h);
        $('.membercenter .recharge').click(function(){
            var money_num = $('.membercenter .personaldata .moneynum input').val();
            if(money_num==''){
                alert('请输入充值金额');
            }else{
                $('.gradecard .payment-layer .con .money-num .p2').html(money_num)
                $('.gradecard .payment-layer .con').animate({'bottom':'0px'},300);
                $('.payment-layer').fadeIn();
            }
        });
        $('.gradecard .topmask').click(function(){
            var con_h = $('.gradecard .payment-layer .con').height();
            $('.gradecard .payment-layer .con').animate({'bottom':-con_h},300,function(){
                $('.payment-layer').fadeOut();
            });
        });
        //    充值 点击推荐金额
        $('.membercenter .recommendnum p').click(function(){
            var text = $(this).data('num');
            $('.membercenter .personaldata .moneynum input').val(text);
        });
        //    微信支付宝选择
        $('.gradecard .payment-layer .con .pay-mode .public .radio').click(function(){
            $(this).attr('src','images/icon41.png').parent().siblings('.public').children('.radio').attr('src','images/icon40.png');
            $(this).addClass('hover').parent().siblings('.public').children('.radio').removeClass('hover');
        });
//        获取页面数据

        var data = {uid:$.cookie("local_userId")};
        $.ajax({
            type : 'get',
            url : 'http://ekang.ren/memberCenter/getUserMemberInfo',
            dataType : 'jsonp',
            data : data,
            success : function(res) {
                if(res.ret==0){
                    console.log(res);
                    var data = res.data;
                    $('.membercenter .personaldata .userinfor .left .head_pic,.gradecard .payment-layer .con .userinfor .left .head_pic').attr('style',' background: url('+ data.avatar_file+') center; background-size: cover;');
                    $('.membercenter .personaldata .userinfor .left .name_time .name,.gradecard .payment-layer .con .userinfor .left .name_time .name').html(data.user_name);
                    $('.membercenter .personaldata .userinfor .left .name_time .time,.gradecard .payment-layer .con .userinfor .left .name_time .time').html(data.service_start+'-'+data.service_end);
                    $('.membercenter .personaldata .userinfor .right img,.gradecard .payment-layer .con .userinfor .right img').attr('src',data.max_product_img);
                    $('.membercenter .personaldata .userinfor .right p,.gradecard .payment-layer .con .userinfor .right p').html(data.product_name);
                    $('.membercenter .personaldata .remarks').html('注：'+data.promotion_text);
                    $('.gradecard .payment-layer .con .time .p2').html(data.service_start_1+'-'+data.service_end_1)
                }
                else{
                    alert(res.msg);
                }
            }
        });
        if($.cookie("is_wechat")==1){
            $('.gradecard .payment-layer .con .pay-mode .wechat').hide();
            $('.gradecard .payment-layer .con .pay-mode .alipay .radio').hide();
            $('.gradecard .payment-layer .con .pay-mode .wechat .radio').removeClass('hover')
        }
//        点击支付
        $('.gradecard .payment-layer .con .button-pay').click(function(){
            var money_num = $('.membercenter .personaldata .moneynum input').val();
            if($('.gradecard .payment-layer .con .pay-mode .wechat .radio').hasClass('hover')){
                pay_mode = 'wx_pub';
            }else{
                pay_mode = 'alipay_wap';
            }
            $.ajax({
                type : 'get',
                url : 'http://ekang.ren/diagnosis/submitUserServiceOrder',
                dataType : 'jsonp',
                data : {total_amount:money_num,uid:$.cookie("local_userId")},
                success : function(res) {
                    var data = res.data;
                    var order_id = data.order_id
                    if(res.ret==0){
                        console.log(res);
                        code = membercenter.getQueryString("code");
                        $.ajax({
                            type: 'GET',
                            url:  'http://ekang.ren/diagnosis/getcharge/',
                            data: {         // 需要于客户端同步
                                order_id: order_id,
                                pay_method:pay_mode,
                                uid:$.cookie("local_userId"),
                                code : code
                            },
                            dataType: 'jsonp',
                            jsonp: 'callback',
                            success: function (result) {
                                if(result.ret){
                                    alert(result.msg);
                                }
                                pingpp.createPayment(result.data.charge, function(result, err) {
                                    if (result=="success") {
                                        location.href = '../memberCenter/index.html'
                                    } else {

                                    }
                                });
                            }
                        });
                    }else{
                        console.log(res.msg);
                    }
                }
            });
        });
    });
    membercenter = {
//    获取连接参数
        getQueryString : function(name){
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(decodeURI(r[2])); return null;
        },

    }
</script>
<style>
    .membercenter .personaldata .remarks{
        font-size: 3.8vw;
        margin: 10px;
        color: #666;
    }
    .membercenter .personaldata .moneynum{
        width: auto;
        margin: 10px;
        background: #ecf0f7;
        border-radius: 5px;
        overflow: hidden;
        color: #999;
    }
    .membercenter .personaldata .moneynum label{
        font-size: 4vw;
        line-height: 7vw;
        margin: 3vw 10px;
        float: left;
    }
    .membercenter .personaldata .moneynum input{
        font-size: 4vw;
        width: auto;
        height: 7vw;
        border: none;
        outline: none;
        line-height: 7vw;
        margin: 2.5vw 10px 0 0;
        background: none;
        float: left;
    }
    .membercenter .recommendnum{
        width:auto;
        margin: 20px;
        height: auto;
        overflow: hidden;
    }
    .membercenter .recommendnum p{
        width: 23vw;
        height: 9vw;
        border: 1px solid #6cddc6;
        float: left;
        line-height: 9vw;
        text-align: center;
        border-radius: 20vw;
        color: #6cddc6;
        margin-right: 8vw;
        margin-bottom: 20px;
        font-size: 4vw;
    }
    .membercenter .recommendnum p:nth-child(2){
        border: 1px solid #fe8a1f;
        color: #fe8a1f;
    }
    .membercenter .recommendnum p:nth-child(3){
        border: 1px solid #5999ef;
        color: #5999ef;
        margin-right: 0;
    }
    .membercenter .recommendnum p:nth-child(4){
        margin-left:16vw;
        border: 1px solid #fa7b9f;
        color: #fa7b9f;
    }
    .membercenter .recommendnum p:nth-child(5){
        border: 1px solid #dd7ff5;
        color: #dd7ff5;
    }
    .membercenter .recommendnum p:nth-child(6){
        border: 1px solid #47c7fc;
        color: #47c7fc;
    }
    .membercenter .recommendnum p:nth-child(7){
        border: 1px solid #f19562;
        color: #f19562;
    }
    .membercenter .recommendnum p:nth-child(8){
        margin-right: 0;
        border: 1px solid #5eda70;
        color: #5eda70;
    }

    .membercenter .recharge{
        width: 78vw;
        height: 13.75vw;
        border: none;
        border-radius: 5px;
        background: #44b181;
        font-size: 5vw;
        color: #fff;
        font-family: '微软雅黑';
        letter-spacing: 3px;
        display: block;
        margin: auto;
    }

    .membercenter .personaldata{
        width:100%;
        height: auto;
        overflow: hidden;
        background: #fff;
    }
    .membercenter .personaldata .userinfor{
        width: auto;
        margin: 10px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding-bottom: 3vw;
    }
    .membercenter .personaldata .userinfor .left{
        float: left;
        width:auto;
        overflow: hidden;
    }
    .membercenter .personaldata .userinfor .left .head_pic{
        width: 16vw;
        height:16vw;
        border-radius: 1000px;
        float: left;
        margin-left: 10px;
    }
    .membercenter .personaldata .userinfor .left .name_time{
        float: left;
        width:auto;
        height:auto;
        overflow: hidden;
        margin-left: 2vw;
    }
    .membercenter .personaldata .userinfor .left .name_time .name{
        font-size: 4vw;
        margin-top: 1.8vw;
    }
    .membercenter .personaldata .userinfor .left .name_time .time{
        color:#c7c7c7;
        font-size: 3.4vw;
        margin-top: 5vw;
    }
    .membercenter .personaldata .userinfor .right{
        float: right;
        height: auto;
        overflow: hidden;
        width: 15vw;
        margin-right: 10px;
    }
    .membercenter .personaldata .userinfor .right img{
        width: 8vw;
        height: auto;
        overflow: hidden;
        display: block;
        margin: auto;
    }
    .membercenter .personaldata .userinfor .right p{
        font-size: 3.4vw;
        text-align: center;
        margin-top: 4px;
    }
    /*支付弹层*/
    .gradecard .payment-layer{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: fixed;
        top:0;
        left:0;
        display: none;
    }
    .gradecard .topmask{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0);
    }
    .gradecard .payment-layer .con{
        width: 100%;
        position: absolute;
        bottom: 0px;
        background: #fff;
    }
    .gradecard .payment-layer .con .coupon{
        width: 100%;
        height:45px;
        border-bottom: 1px dashed #eee;
    }
    .gradecard .payment-layer .con .coupon .p-left{
        float: left;
        font-size: 14px;
        color: #000;
        margin-left: 10px;
        line-height: 45px;
    }
    .gradecard .payment-layer .con .coupon img{
        float: right;
        margin-right: 10px;
        width: 20px;
        margin-top: 12px;
    }
    .gradecard .payment-layer .con .name{
        width: auto;
        height: 44px;
        margin-left: 10px;
    }
    .gradecard .payment-layer .con .name .p1{
        color: #666;
        font-size: 14px;
        line-height: 44px;
        float: left;
    }
    .gradecard .payment-layer .con .name .p2{
        color: #333;
        font-size: 14px;
        line-height: 44px;
        float: left;
        margin-left: 10px;
    }
    .gradecard .payment-layer .con .public{
        width: auto;
        height: 44px;
        margin-left: 10px;
    }
    .gradecard .payment-layer .con .public .p1{
        color: #000;
        font-size: 14px;
        line-height: 44px;
        float: left;
    }
    .gradecard .payment-layer .con .public .p2{
        color: #666;
        font-size: 14px;
        line-height: 44px;
        float: left;
        margin-left: 20px;
    }
    .gradecard .payment-layer .con .pay-mode{
        width: auto;
        height: 44px;
        margin-left: 10px;
    }
    .gradecard .payment-layer .con .pay-mode .p1{
        color: #000;
        font-size: 14px;
        line-height: 44px;
        float: left;
    }
    .gradecard .payment-layer .con .pay-mode .public{
        width: 60px;
        height: auto;
        float: left;
        margin-left: 23px;
        margin-top: 8px;
    }
    .gradecard .payment-layer .con .pay-mode .public .img{
        width: 30px;
        height:30px;
        float: left;
    }
    .gradecard .payment-layer .con .pay-mode .public .radio{
        width: 20px;
        height:20px;
        float: left;
        margin-top: 6px;
        margin-left: 10px;
    }
    .gradecard .payment-layer .con .contact-time{
        color:#ff8936;
        line-height: 44px;
        margin-right: 10px;
        font-size: 4vw;
        float: right;
    }
    .gradecard .payment-layer .con .button-pay{
        width: 95%;
        height:44px;
        color: #fff;
        background: #44b181;
        border: none;
        display: block;
        margin:10px auto;
        border-radius: 5px;
        font-size: 16px;
        font-family: '微软雅黑';
    }
    .gradecard .payment-layer .con .userinfor{
        width: auto;
        padding: 10px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding-bottom: 3vw;
    }
    .gradecard .payment-layer .con .userinfor .left{
        float: left;
        width:auto;
        overflow: hidden;
    }
    .gradecard .payment-layer .con .userinfor .left .head_pic{
        width: 16vw;
        height:16vw;
        border-radius: 1000px;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }
    .gradecard .payment-layer .con .userinfor .left .name_time{
        float: left;
        width:auto;
        height:auto;
        overflow: hidden;
        margin-left: 2vw;
    }
    .gradecard .payment-layer .con .userinfor .left .name_time .name{
        font-size: 4vw;
        margin-top: 1.8vw;
        height:auto;
        margin-left: 0;
    }
    .gradecard .payment-layer .con .userinfor .left .name_time .time{
        color:#c7c7c7;
        font-size: 3.4vw;
        margin-top: 5vw;
    }
    .gradecard .payment-layer .con .userinfor .right{
        float: right;
        height: auto;
        overflow: hidden;
        width: 15vw;
        margin-right: 10px;
    }
    .gradecard .payment-layer .con .userinfor .right img{
        width: 8vw;
        height: auto;
        overflow: hidden;
        display: block;
        margin: auto;
    }
    .gradecard .payment-layer .con .userinfor .right p{
        font-size: 3.4vw;
        text-align: center;
        margin-top: 4px;
    }
</style>
</body>
<body style=" background: #ebebeb;  margin: auto;-webkit-overflow-scrolling: touch;overflow: scroll;">
<div class="membercenter recharge">
    <!--用户简介-->
    <div class="personaldata">
        <div class="userinfor">
            <div class="left">
                <div class="head_pic"></div>
                <div class="name_time">
                    <p class="name"></p>
                    <p class="time"></p>
                </div>
            </div>
            <div class="right">
                <img src="">
                <p></p>
            </div>
        </div>
        <p class="remarks"></p>
        <div class="moneynum">
            <label>输入充值金额：</label>
            <input type="number">
        </div>
    </div>
    <div class="recommendnum">
        <p data-num="200">200元</p>
        <p data-num="599">599元</p>
        <p data-num="999">999元</p>
        <p data-num="5888">5888元</p>
        <p data-num="9800">9800元</p>
        <p data-num="39888">39888元</p>
        <p data-num="50000">5万元</p>
        <p data-num="150000">15万元</p>
    </div>
    <button class="recharge">立即充值</button>
</div>
<div class="gradecard">
    <div class="payment-layer" style=" display: block">
        <div class="topmask"></div>
        <div class="con" style="bottom: 0px;">
            <div class="userinfor">
                <div class="left">
                    <div class="head_pic"></div>
                    <div class="name_time">
                        <p class="name"></p>
                        <p class="time"></p>
                    </div>
                </div>
                <div class="right">
                    <img src="">
                    <p></p>
                </div>
            </div>
            <div class="time public">
                <p class="p1">会员时间</p>
                <p class="p2"></p>
            </div>
            <div class="money-num public">
                <p class="p1">充值金额</p>
                <p class="p2"></p>
            </div>
            <div class="pay-mode">
                <p class="p1">支付方式</p>
                <div class="wechat public">
                    <img class="icon-wechat img" src="images/icon42.png">
                    <img class="radio hover" src="images/icon41.png">
                </div>
                <div class="alipay public">
                    <img class="icon-alipay img" src="images/icon43.png">
                    <img class="radio" src="images/icon40.png">
                </div>
            </div>
            <!--<span class="contact-time">239.3元 （8折）</span>-->
            <button class="button-pay ui-btn ui-shadow ui-corner-all">支付</button>
        </div>
    </div>
</div>
</body>
</html>